<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Stock Data Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%; height: 600px;"></div>

<div style="margin-top: 20px;">
    <label for="queryDate">Enter Date (YYYY-MM-DD): </label>
    <input type="date" id="queryDate">
    <button onclick="fetchStockData()">Query</button>
</div>

<script>
// 初始化ECharts
var chart = echarts.init(document.getElementById('main'));

// 初始加载数据
fetchStockData();

// 定义获取数据的函数
function fetchStockData() {
    var queryDate = document.getElementById('queryDate').value;
    var url = "/stock_data";

    // 如果有指定日期，则构造带日期参数的URL
    if (queryDate) {
        url += "?date=" + queryDate;
    }

    fetch(url)
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json();
    })
    .then(data => {
        // 打印获取到的数据以调试
        console.log('Fetched data:', data);

        // 输出到页面
        var output = document.getElementById('output');
        output.innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';

        // 处理数据
        const dates = data.map(item => item.date);
        const closePrices = data.map(item => item.close);
        const openPrices = data.map(item => item.open);
        const lowPrices = data.map(item => item.low);
        const highPrices = data.map(item => item.high);
        const volumes = data.map(item => item.volume);

        // 设置图表选项
        const option = {
            title: {
                text: 'Stock Data Chart'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Close Price', 'Open Price', 'Low Price', 'High Price', 'Volume']
            },
            xAxis: {
                type: 'category',
                data: dates,
                axisLabel: {
                    formatter: function (value) {
                        // 格式化日期为 'YYYY-MM-DD'
                        return new Date(value).toISOString().split('T')[0];
                    }
                }
            },
            yAxis: [
                {
                    type: 'value',
                    name: 'Price',
                    position: 'left'
                },
                {
                    type: 'value',
                    name: 'Volume',
                    position: 'right'
                }
            ],
            series: [
                {
                    name: 'Close Price',
                    type: 'line',
                    data: closePrices
                },
                {
                    name: 'Open Price',
                    type: 'line',
                    data: openPrices
                },
                {
                    name: 'Low Price',
                    type: 'line',
                    data: lowPrices
                },
                {
                    name: 'High Price',
                    type: 'line',
                    data: highPrices
                },
                {
                    name: 'Volume',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: volumes
                }
            ]
        };

        // 使用配置项显示图表
        chart.setOption(option);
    })
    .catch(error => {
        console.error('Error fetching stock data:', error);
    });
}
</script>

<div id="output" style="margin-top: 20px;"></div>

</body>
</html>